<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        background:url(images/1.jpg) no-repeat center top
    }
    .baidu{
        width:600px;
        height:130px;
        display:flex;
        list-style:none;
        margin:100px auto;
        background-color:#fff;
        padding:3px;
    }
    .baidu img{
        width:200px;
    }
</style>
<body>
    <ul class="baidu">
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
    </ul>
    <script>
        //实现百度换肤的效果
        //给三张图片利用循环注册点击事件
        //当点击这个图片的时候，背景图就换成这张图片
        //核心算法：把当前的图片的src取过来，然后，把背景图片换这个这张图片

        //先获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        //通过循环遍历来 获取元素后给每一个元素添加注册事件
        for( var i = 0; i < imgs.length; i++){  //获取到每一个元素
           //给每一个元素添加点击事件
            imgs[i].onclick = function(){
                // console.log(this.src);
                //当点击这个图片的时候，这个图片的地址就是背景图的地址
                //给body
                //注意加属性的时候必须是字符串
                document.body.style.backgroundImage = 'url('+this.src+')'
            }

        }
        

    </script>
    
</body>
</html>